<template>
    <div class="bar">
        <div>
            <img class="returnImg" src="../assets/imgs/home/returnIcon.png" alt="" v-on:click="back">
        </div>
        <div class="search">
            <div style="width: 20px;height: 20px;margin-top: 4px">
                <img src="../assets/imgs/map/search.png" alt="">
            </div>
            <input style="margin-left: 15px" type="value" placeholder="搜索"/>
        </div>
        <div class="select" @click="drawer = true">
            <img src="../assets/imgs/map/select.png" alt="">
        </div>
        <div class="select">
            <el-drawer size="70%" :visible.sync="drawer" :with-header="false">
                <div v-for="(item,trrIndex) in listData" :key="item.id">
                    <div class="title">{{item.title}}</div>
                    <div class="list">
                        <div class="listTag" @click="drawerDoor(index,trrIndex,$event)"
                             v-for="(array,index) in item.array">
                            <div class="listBox">
                                <img :src="array.srcTwo" alt="" v-if="array.check">
                                <img :src="array.src" alt="" v-else>
                            </div>
                            <div class="boxText">{{array.name}}</div>
                        </div>
                    </div>
                </div>
            </el-drawer>
        </div>
    </div>
</template>

<script>
    export default {
        name: "mapBar",
        props: {text: String},
        components: {},
        data() {
            return {
                drawer: false,
                idx: 0,
                inx: 0,
                listData: [
                    {
                        title: '指标数据',
                        array: [
                            {
                                src: require('../assets/imgs/map/costomer.png'),
                                srcTwo: require('../assets/imgs/map/costomerOne.png'),
                                name: '客流量',
                                check: false,
                            },
                            {
                                src: require('../assets/imgs/map/sale.png'),
                                srcTwo: require('../assets/imgs/map/saleOne.png'),
                                name: '销售额',
                                check: false,
                            },
                            {
                                src: require('../assets/imgs/map/collector.png'),
                                srcTwo: require('../assets/imgs/map/collectorOne.png'),
                                name: '集客力',
                                check: false,
                            },
                            {
                                src: require('../assets/imgs/map/collector.png'),
                                srcTwo: require('../assets/imgs/map/collectorOne.png'),
                                name: '坪效值',
                                check: false,
                            },
                        ]
                    },
                    {
                        title: '热力图',
                        array: [
                            {
                                src: require('../assets/imgs/map/passenger.png'),
                                srcTwo: require('../assets/imgs/map/passengerOne.png'),
                                name: '客流',
                                check: false,
                            },
                            {
                                src: require('../assets/imgs/map/PlateauOne.png'),
                                srcTwo: require('../assets/imgs/map/plateau.png'),
                                name: '坪效',
                                check: false,
                            }
                        ]
                    },
                    {
                        title: '运维',
                        array: [
                            {
                                src: require('../assets/imgs/map/security.png'),
                                srcTwo: require('../assets/imgs/map/securityOne.png'),
                                name: '安防',
                                check: false,
                            },
                            {
                                src: require('../assets/imgs/map/elevatorOne.png'),
                                srcTwo: require('../assets/imgs/map/elevator.png'),
                                name: '电梯',
                                check: false,
                            },
                            {
                                src: require('../assets/imgs/map/recognizer.png'),
                                srcTwo: require('../assets/imgs/map/RecognizerOne.png'),
                                name: '识别器',
                                check: false,
                            },
                            {
                                src: require('../assets/imgs/map/securitypeople.png'),
                                srcTwo: require('../assets/imgs/map/securitypeopleOne.png'),
                                name: '保安',
                                check: false,

                            },
                            {
                                src: require('../assets/imgs/map/cleaningOne.png'),
                                srcTwo: require('../assets/imgs/map/cleaning.png'),
                                name: '保洁',
                                check: false,
                            }
                        ]
                    },
                ]
            };

        },
        computed: {},
        created() {
        },
        mounted() {
            // this.drawerDoor()
        },
        methods: {
            back() {
                console.log(11111111)
                this.$router.go(-1);//返回上一层
            },
            drawerDoor(index, trrIndex, event) {
                this.listData[this.inx].array[this.idx].check = false
                console.log('qqqq')
                this.drawer = false;
                this.idx = index;
                this.inx = trrIndex;
                //获取点击对象
                // var el = event.currentTarget;
                console.log(this.idx)
                console.log(this.inx)
                var dataArr = this.listData[this.inx].array

                if (dataArr[this.idx].check == true) {
                    dataArr[this.idx].check = false
                } else {
                    dataArr[this.idx].check = true
                }
                console.log(dataArr[this.idx].check, 'www')
                console.log(this.listData)
            }
        }
    }
</script>

<style scoped lang="scss">
    .bar {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: fixed;
        height: 48px;
        top: 0;
        left: 0;
        width: 100%;
        background: #fff;
        box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.06);
        position: relative;

        .returnImg {
            width: 10px;
            height: 19px;
            left: 16px;
            position: absolute;
            top: 14px;
        }

        .search {
            width: 273px;
            height: 32px;
            background: rgba(241, 241, 241, 1);
            border-radius: 17px;
            margin-left: 50px;
            padding: 5px 16px;
            box-sizing: border-box;
            display: flex;
            justify-content: flex-start;

            input {
                background: none;
                outline: none;
                border: none;
            }
        }

        .select {
            margin-left: 20px;

            .title {
                width: 100%;
                height: 23px;
                background: rgba(242, 242, 242, 1);
                margin-top: 17px;
                font-size: 13px;
                font-weight: 400;
                color: rgba(153, 153, 153, 1);
                line-height: 23px;
                text-align: left;
                padding: 0 0 0 18px;
                box-sizing: border-box;
            }

            .list {
                width: 100%;
                /*height: 190px;*/
                box-sizing: border-box;
                display: flex;
                flex-wrap: wrap;

                .listTag {
                    width: 33.3%;
                    height: 80px;
                    margin-top: 8px;

                    .listBox {
                        margin: 10px auto;
                        font-size: 14px;
                        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                        font-weight: 400;
                        color: rgba(102, 102, 102, 1);
                    }
                }
            }
        }

    }


</style>